<template>
	<view class="home">
		<view class="content" v-if="flag">
			<view class="item" v-for="item in articleArr" :key="item._id" @click="goDetail(item._id)">
				<view class="text">
					<view class="title">
						{{item.title}}
					</view>
					<view class="info">
						<text>{{item.author}}</text>
						<uni-dateformat :date="item.posttime" :threshold="[60000,3600000]"
							format="MM-dd"></uni-dateformat>
						<text>
							<uni-icons type="hand-up" size="20"></uni-icons>
							{{item.num}}
						</text>
					</view>
				</view>
				<!-- 对数据库图片进行判断 -->
				<view class="icon" v-if="item.Image">
					<image :src="item.Image[0]" mode="aspectFill"/>
				</view>
				<view class="icon" v-else>
					<image src="/static/logo.png" mode="aspectFill"/>
				</view>
			</view>
		</view>
		<!-- 设置蒙层 -->
		<view v-else>
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleArr: [],
				flag: false,
				aname:''
			}
		},
		onShow() {
			this.articleArr=[]
			this.getData(this.aname)
		},
		//对name进行储存，方便多次使用
		onLoad(e) {
			this.aname=e
		},
		
		methods: {
			//获取数据
			getData(e) {
				console.log(e.userName)
				uniCloud.callFunction({
					name:'getallData',
					data:{
						aname:e.userName
					}
				}).then((res)=>{
					//先获取老的数据在进行拼接
					this.articleArr =res.result.data
					this.flag=true
				})
			},
			// 跳转到详情页(可进行修改，删除)
			goDetail(e) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + e,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.content {
			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: 1rpx #d6d6d6 solid;

				.text {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 40rpx;
						color: #333;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					.info {
						font-size: 28rpx;
						color: #888;

						text {
							margin-right: 20rpx;
						}
					}
				}
			}

			.icon {
				image{
					width: 150rpx;
					height: 150rpx;
					object-fit: cover;
				}
			}
		}

		.goAdd {
			width: 100rpx;
			height: 100rpx;
			background-color: #2b9939;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50rpx;
			position: fixed;
			right: 60rpx;
			bottom: 100rpx;
		}
	}
</style>